<template>
	<div class="role-permission-container">
		<div class="header">
			<p class="label">角色权限</p>
			<p class="line"></p>
		</div>
		<div class="divider-H" />
		<div class="content-wrapper">
			<RoleList @select="onSelectRole" />
			<div class="divider-v" />
			<div class="content">
				<p class="title">该角色将对以下菜单模块拥有查看、编辑、新增、删除的权限</p>

				<el-form :model="roleData" ref="formRef" class="permission-form">
					<el-form-item :rules="roleData.userPermissionRules" prop="">
						<Permisions @select="onSelect" :initPermission="roleData.permission" />
					</el-form-item>
					<el-button class="button" type="primary" @click="save">保存</el-button>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import RoleList from './RoleList.vue';
import Permisions from './Permisions.vue';
import { changePermission } from '../../../api/api';
export default {
	components: { RoleList, Permisions },
	data() {
		return {
			roleData: {
				permission: [],
				userPermissionRules: [{ required: true, message: '请勾选权限', trigger: ['blur', 'change'] }]
			},
			curRole: {}
		};
	},
	computed: {},
	mounted() {},

	methods: {
		onSelectRole(role) {
			this.curRole = role;
			this.roleData.permission = this.curRole.permission;
		},
		onSelect(options) {
			this.roleData.permission = options;
		},
		save() {
			if (this.roleData.permission.length <= 0) {
				this.$message.warning('角色权限不能为空');
				return;
			}
			this.changePermission();
		},
		changePermission() {
			changePermission(this.curRole.id, this.roleData.permission)
				.then(res => {
					if (res.status === 200) {
						this.curRole.permission = this.roleData.permission.slice();
						this.$message.success('保存成功');
					} else {
						console.warn('change permission  ', res);
					}
				})
				.catch(err => {
					console.error('change permission error ', err);
				});
		}
	}
};
</script>

<style lang="less" scoped>
.role-permission-container {
	height: 100%;
	background: #c5c5c5;
	overflow: hidden;

	.header {
		padding-top: 20px;
		text-align: center;
		width: 76px;
		background: #fff;
		width: 100%;
		text-align: left;

		.label {
			font-size: 12px;
			font-weight: 500;
			color: #6384fe;
			line-height: 24px;
			margin-left: 11px;
		}

		.line {
			width: 76px;
			height: 2px;
			background: #6384fe;
			margin-top: 12px;
		}
	}
	.divider-H {
		width: 100%;
		height: 10px;
		background: #f8f8f8;
		width: calc(100% + 24px);
		margin-left: -12px;
	}
	.content-wrapper {
		display: flex;
		// padding: 20px;
		height: calc(100% - 65px);
		box-sizing: border-box;
		background: #fff;

		.title {
			font-size: 12px;
			font-weight: 500;
			color: #333333;
			line-height: 16px;
		}

		.divider-v {
			width: 1px;
			height: 100%;
			background: #ebedef;
		}

		.content {
			width: 100%;
			height: auto;
			overflow-y: auto;
			padding: 20px;

			.permission-checkbox-group {
				margin-top: 24px;
			}
		}
	}
	.button {
		width: 68px;
		height: 32px;
		background: #6384fe;
		border: 1px solid #6384fe;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #ffffff;
		// line-height: 24px;
		padding: 0;
	}
	.permission-form {
		width: 30%;
	}
}
</style>
